<template>
	<view>
		<view class="content">
			<view class="xuanze" @click="selectIsXiala">
				<text>{{optionIndex}}</text>
				<uni-icons v-if="isXiala!=true" type="bottom" size="20" />
				<uni-icons v-if="isXiala!=false" type="top" size="20" />

				<view class="xiala" v-if="isXiala">
					<view class="xiala-xuan">
						<view class="xiala-hang" v-for="(item,index) in entrceList" @click="xuanzeMoban(item)">
							{{item.deviceName}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="titlName">
			<view class="echartsWrapper">
				<echarts ref="echarts" class="echarts" :option="option" @datazoom="datazoom" />
			</view>
		</view>
		<view class="titlName">
			<view class="echartsWrapper">
				<echarts ref="echartsa" class="echarts2" :option="optiona" @datazoom="humDatazoom" />
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isXiala: false,
				optionIndex: '请选择',
				floatHumValue: '',
				isCheck: true,
				entrceList: [], //设备数组
				idList: [],
				temDevData: undefined, // 
				humDevData: undefined, //
				itemBject: {},
				name: '',
				device_id: null,
				// temPagination: { // 温度分页
				// 	pageNo: 1
				// },
				// humPagination:{ // 湿度分页
				// 	pageNo: 1
				// }
				temPageNo: 1,
				humPageNo: 1,
			}
		},
		onLoad(options) {
			this.entrceList = JSON.parse(options.item);
			this.name = this.entrceList[0].deviceName;
			// console.log(this.entrceList[0], '5144848584');
			if (this.isXiala == false) {
				this.optionIndex = this.name
				this.device_id = this.entrceList[0].id
				this.deviceData(1)
				this.itemBject = this.entrceList[0]
			}
		},
		computed: {
			option() {
				let legend = ['温度']
				let xAxis = []
				let series = []
				let tem = [] // 温度
				let hum = [] // 湿度
				let humMarkPoint = []
				let temMarkPoint = []
				let temMax;
				let temMin;
				let floatTemValue;
				let isCheck;
				let temValueMax;
				let temValueMin;
				let showSymbo
				if (this.itemBject) {
					temMax = this.itemBject.temMax
					temMin = this.itemBject.temMin
					floatTemValue = this.itemBject.floatTemValue //温度偏移量

					// 0 不预警 1 预警
					if (this.itemBject.isCheck == 0) {
						isCheck = false
					} else {
						showSymbo = true
						isCheck = true
					}
				}
				if (this.temDevData) {
					temValueMax = Math.max.apply(Math, this.temDevData.map(item => {
						return Math.ceil(item.temValue * 1.2)
					}))
					temValueMin = Math.min.apply(Math, this.temDevData.map(item => {
						return Math.ceil(item.temValue * 0.8)
					}))

					this.temDevData.forEach((item, index) => {
						// console.log(item.temValue,'温度温度温度温度温度温度');
						xAxis.push(item.recordtimeDate)
						if (isCheck) {
							tem.push(item.temValue)
							if ((item.temValue + floatTemValue) > (temMax + floatTemValue) || (item.temValue -
									floatTemValue) < (temMin - floatTemValue)) {
								temMarkPoint.push({
									coord: [index, item.temValue],
									value: item.temValue
								})
								showSymbo = false
							}
						} else {
							showSymbo = true
							tem.push(item.temValue)
						}
					})
					series.push({
						name: '温度',
						type: 'line',
						data: tem,
						showSymbol: showSymbo,
						itemStyle: {
							normal: {
								color: '#B5001E', //改变折线点的颜色
								label: {
									show: true,
									color: '#B5001E' //改变折线颜色
								}
							}
						},
						markPoint: {
							data: temMarkPoint
						}
					})
				}
				// console.log(this.dataZoom,'控制图表左右滑动');
				return {
					title: [{
						// show: true,
						show: isCheck, //false
						subtext: "温度" + '（' + temMin + '~' + temMax + '±' + floatTemValue + '）' + '℃', //副标题文
						top: '3.5%',
						left:'3%',
						subtextStyle: {
							color: "#B5001E"
						}
					}],
					dataZoom: [{ // 控制图表左右滑动
						width: '15',
						type: 'slider',
						show: false, //flase直接隐藏图形
						xAxisIndex: [0],
						left: 33, //滚动条靠左侧的百分比
						bottom: 40,
						height: 20, //组件高度  
						start: 0, //滚动条的起始位置
						showDataShadow: false, //是否显示数据阴影
						showDetail: false, //是否显示想洗数值信息
						end: 10, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
						zoomLock: true
					}, {
						type: 'inside',
						show: true,
						xAxisIndex: [0],
						start: 0, //滚动条的起始位置
						end: 0.25, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
						zoomLock: true
					}],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					legend: {
						data: legend,
						top: "6%"
					},
					grid: {
						// heigth: '10px',
						left: '3%',
						// right: '3%',
						top: '25%',
						containLabel: true
					},
					xAxis: {
						nameLocation: 'center',
						type: 'category',
						data: xAxis,
						axisLabel: {
							interval: 'auto',
							formatter(value) {
								return value.replace(" ", '\n')
							}
						},
						
					},
					yAxis: [{
						type: 'value',
						max: temValueMax,
						min: temValueMin,
						interval: 2,
						axisLabel: {
							color: '#B5001E',
							formatter: '{value} ℃'
						},
						splitNumber: 6, //设置坐标轴的分割段数
					}],
					series: series
				}
			},
			optiona() {
				let legend = ['湿度']
				let xAxis = []
				let series = []
				let tem = [] // 温度
				let hum = [] // 湿度
				let humMarkPoint = []
				let temMarkPoint = []
				let humMax;
				let humMin;
				let floatHumValue;
				let temMax;
				let temMin;
				let floatTemValue;
				let isCheck;
				let mathMax;
				let mathMin;
				let showHum;
				if (this.itemBject) {
					humMax = this.itemBject.humMax //湿度最大量
					humMin = this.itemBject.humMin //湿度最小量
					floatHumValue = this.itemBject.floatHumValue //温度偏移量

					//0 不预警 1 预警
					if (this.itemBject.isCheck == 0) {
						isCheck = false
					} else {
						showHum = true
						isCheck = true
					}
				}
				if (this.humDevData) {
					mathMax = Math.max.apply(Math, this.humDevData.map(item => {
						return Math.ceil(item.humValue * 1.2)
					}))
					mathMin = Math.min.apply(Math, this.humDevData.map(item => {
						return Math.ceil(item.humValue * 0.8)
					}))
					// console.log(mathMax, '01010111');
					this.humDevData.forEach((item, index) => {
						xAxis.push(item.recordtimeDate)
						if (isCheck) {
							hum.push(item.humValue)

							if ((item.humValue + floatHumValue) > (temMax + floatHumValue) || (item.humValue -
									floatHumValue) < (temMin - floatHumValue)) {
								//湿度humValue
								humMarkPoint.push({
									coord: [index, item.humValue],
									value: item.humValue
								})
								showHum = false
							}
						} else {
							showHum = true
							hum.push(item.humValue)
						}
					})
					series.push({
						name: '湿度',
						type: 'line',
						data: hum,
						showSymbol: showHum,
						itemStyle: {
							normal: {
								color: '#00CCFF', //改变折线点的颜色
								label: {
									show: true,
									color: '#00CCFF' //改变折线颜色
								}
							}
						},
						markPoint: {
							data: humMarkPoint
						}
					})
				}
				return {
					title: [{
						// show: true,
						show: isCheck, //false
						subtext: "湿度" + '（' + humMin + '~' + humMax + '±' + floatHumValue + '）' + '%', //副标题文
						top: '3.5%',
						left:'3%',
						subtextStyle: {
							color: "#0fa4ee"
						}
					}],

					dataZoom: [{ // 控制图表左右滑动
						width: '15',
						type: 'slider',
						show: false, //flase直接隐藏图形
						xAxisIndex: [0],
						left: 33, //滚动条靠左侧的百分比
						bottom: 40,
						height: 20, //组件高度  
						start: 0, //滚动条的起始位置
						showDataShadow: false, //是否显示数据阴影
						showDetail: false, //是否显示想洗数值信息
						end: 10, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
						zoomLock: true
					}, {
						type: 'inside',
						show: true,
						xAxisIndex: [0],
						start: 0, //滚动条的起始位置
						end: 0.25, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
						zoomLock: true
					}],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					legend: {
						data: legend,
						top: "6%"
					},
					grid: {
						left: '3%',
						// right: '3%',
						top: '25%',
						containLabel: true
					},
					xAxis: {
						nameLocation: 'center',
						type: 'category',
						data: xAxis,
						axisLabel: {
							interval: 'auto',
							formatter(value) {
								return value.replace(" ", '\n')
							}
						},
					},
					yAxis: [{
						type: 'value',
						max: mathMax,
						min: mathMin,
						interval: 10,
						axisLabel: {
							color: '#0fa4ee',
							formatter: '{value} %'
						},
						splitNumber: 6, //设置坐标轴的分割段数
					}],
					series: series
				}
			}
		},
		methods: {
			datazoom(e) {
				if (e.batch[0].end >= 110) {
					// this.deviceData(this.temPageNo++, "temDevData")
				}
			},
			humDatazoom(e) {
				if (e.batch[0].end >= 110) {
					// this.deviceData(this.humPageNo++, "humDevData")
				}
			},
			/**
			 * 时间：2023/04/04
			 * 功能：获取项目温湿度设备数据
			 * 接口：api/PrjHumitureDevice/GetPrjHumitureDeviceData
			 */
			deviceData(pageNo = 1, devKey) {
				this.$http.post('api/PrjHumitureDevice/GetPrjHumitureDeviceData', {
					pageNo,
					pageSize: 1000,
					pjHumitureDeviceInfoId: this.device_id
				}).then(res => {
					let {
						pageIndex,
						totalPages
					} = res

					if (Array.isArray(res.items) && res.items.length > 0) {
						res.items = res.items.map(code => {
							return {
								...code,
								recordtimeDate: code.recordtimeDate.replace('T', ' ').slice(0, 16),
							}
						})
					}

					if (pageIndex === 1) {
						this.temDevData = res.items
						this.humDevData = res.items
					} else {
						this[devKey] = [...this[devKey], ...res.items]
					}
				})
			},
			selectIsXiala() {
				if (this.isXiala == false) {
					this.isXiala = true
				} else if (this.isXiala == true) {
					this.isXiala = false
				}
				console.log(this.isXiala);
			},
			xuanzeMoban(item) {
				this.optionIndex = item.deviceName
				this.isXiala = true
				this.device_id = item.id
				this.deviceData(); //获取项目温湿度设备数据
				this.itemBject = item
			}
		}
	}
</script>

<style lang="less" scoped>
	.dataSelect {
		width: 25%;
		background-color: #fff;
	}

	.titlName {
		margin: auto;
		/* #ifdef MP-WEIXIN */
		padding: 0 0 24rpx 0;
		/* #endif */
		margin-top: 15rpx;
		width: 96%;
		height: 460rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	// .echartsWrapper {
	// 	width: 3000px;
	// }

	.content {
		margin: auto;
		width: 96%;
		margin-top: 15rpx;
	}
	.echarts2{
		width: 100%;
	}

	.xuanze {
		height: 80rpx;
		border-radius: 15rpx;
		background-color: #fff;
		border: 1px solid #efefef;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.xiala {
		position: absolute;
		bottom: -340rpx;
		left: 0;
		height: 330rpx;
		width: 100%;
		display: flex;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 20rpx;
		border: 1px solid #efefef;
		z-index: 9;
	}

	.xiala-xuan {
		box-sizing: border-box;
	}

	.xiala-hang {
		position: relative;
		z-index: 10;
		height: 60rpx;
		width: 380px;
		padding: 5px 0 0 5px;
	}

	.xiala-hang:last-child {
		border: 0px;
	}

	/* 显示或关闭动画*/
	.open {
		animation: slideContentUp 0.3s linear both;
	}

	.close {
		animation: slideContentDown 0.3s linear both;
	}

	/* 动态设置高度 */
	@keyframes slideContentUp {
		from {
			height: 0;
		}

		to {
			height: -230rpx;
		}
	}

	@keyframes slideContentDown {
		from {
			height: -230rpx;
		}

		to {
			height: 0;
		}
	}

	.box {
		width: 700px;
		height: 80px;
		display: flex;
		background-color: #f00;
		overflow-y: auto;
	}

	.sub-box {
		/* 如果最后一个元素还没有margin-right,就打开flex-shrink: 0;这个注释 */
		/* flex-shrink: 0; */
	}

	.item {
		flex-shrink: 0;
		background-color: #ff0;
		width: 300px;
		height: 300px;
		margin-right: 20px;
	}
</style>